<!--  -->
<template>

    <dv-full-screen-container class="background">
        <starBackground></starBackground>
        <dv-loading v-if="IsLoading == 1">Loading...</dv-loading>
        <div class="m-data-screen">

            <bigheader />
            <indicators :indicators="indicatorsData" />
            <div class="content">
                <div class="flex-col" style="flex: 7;padding-right:0">
                    <div class="content">
                        <!-- 高度100%可以隐藏走马灯的指示器，98可以显示出来 -->
                        <el-carousel style="width: 100%;" height="98%" arrow="never" :pause-on-hover="false"
                            :interval="9000" indicator-position="outside">
                            <el-carousel-item v-for="(page, pageIndex) in carouselPages" :key="pageIndex">
                                <div class="carousel-page">
                                    <div class="grid-item" v-for="item in page" :key="item.id">
                                        <workitem :data="item" />
                                    </div>
                                </div>
                            </el-carousel-item>
                        </el-carousel>
                    </div>
                </div>

                <div class="flex-col" style="flex: 3;">

                    <div class="root">
                        <alarm :alarms="alarms" />
                    </div>
                </div>
            </div>


        </div>
        
    </dv-full-screen-container>
</template>

<script setup>
import starBackground from '@/views/components/starBackground.vue'
import oeeitem from './components/oeeitem.vue'
import workitem from './components/workitem.vue'
import alarm from './components/alarm.vue'
import bigheader from './components/header.vue'
import indicators from './components/indicators.vue'
const { proxy } = getCurrentInstance()
const SR = proxy.signalr.SR



onMounted(() => {
    setTimeout(() => {
        IsLoading.value = 0;
    }, 999);
})


const IsLoading = ref(1)


//绑定OEE信息
const oeeData = reactive({
    runTime: '',//运行时间
    failureTime: "",//故障时间
    operatingRate: "",//OEE百分比
    okCount: 0,
    ngCount: 0,
    totalCount: 0
})


const indicatorsData = ref(buildIndicatorsData())

function buildIndicatorsData(data) {
    return [
        { label: '运行时间', value: data?.runTime || '-' },
        { label: '故障时间', value: data?.failureTime || '-' },
        { label: 'OEE', value: data?.operatingRate || '-' },
        { label: '生产总数', value: data?.totalCount || '-' },
        { label: 'OK数', value: data?.okCount || '-' },
        { label: 'NG数', value: data?.ngCount || '-' }
    ]
}

//注册 signalr
function Online() {
    SR.invoke('Demo01Request', 1)
    SR.off('bigScreenDemo01Receive')
    SR.on("bigScreenDemo01Receive", (data) => {
        Object.assign(oeeData, data.oee)
        items.value = data.demoStationData
        alarms.value = data.alarms
        indicatorsData.value = buildIndicatorsData(data.oee)
        //console.log('收到推送信息'  )
    })
    SR.onreconnected((connectionId) => {
        console.log('大屏断线重新连接成功' + connectionId)
        SR.invoke('Demo01Request', 1)
    })
    console.log('demo01大屏注册通信完成')
}





onMounted(() => {
    window.addEventListener('beforeunload', handleBeforeUnload);
    /* 页面挂载时调用signalr注册大屏上线 */
    Online()
});

onUnmounted(() => {
    window.removeEventListener('beforeunload', handleBeforeUnload);
});
//
function handleBeforeUnload(event) {
    // 这里可以执行你的清理或保存操作
    SR.invoke('Demo01Request', 0)
    // event.preventDefault(); // 注意：在某些浏览器中，如果你调用了 preventDefault，可能会显示一个对话框询问用户是否真的要离开。
    event.returnValue = ''; // Chrome 需要这个返回值来阻止对话框显示
}




// 各个工站/工位的信息，示例数据
const items = ref([
    // { id: 1, title: '项目 1', content: '这是项目1的内容' },

]);

const alarms = ref([
    // { content: '1工位A1 - 温度超阈值', alarmTime: '2023-07-25 10:15', level: 'critical' },
    //         { content: '2工位B3 - 设备超时', alarmTime: '2023-07-25 10:10', level: 'warning' },
    //         { content: '3物料区 - 库存低', alarmTime: '2023-07-25 10:05', level: 'info' },
    //         { content: '4工位C5 - 传送带异常', alarmTime: '2023-07-25 10:00', level: 'warning' },
    //         { content: '5质检区 - 合格率低', alarmTime: '2023-07-25 09:55', level: 'critical' },
    //         { content: '6电源模块 - 电压波动', alarmTime: '2023-07-25 09:50', level: 'info' },
    //         { content: '7工位D2 - 机械臂偏差', alarmTime: '2023-07-25 09:45', level: 'warning' },
    //         { content: '8冷却系统 - 流量不足', alarmTime: '2023-07-25 09:40', level: 'critical' },
    //         { content: '9仓储区 - 物料过期', alarmTime: '2023-07-25 09:35', level: 'info' },
    //         { content: '10工位E7 - 传感器无响应', alarmTime: '2023-07-25 09:30', level: 'warning' },
    //         { content: '11包装区 - 封箱不牢', alarmTime: '2023-07-25 09:25', level: 'info' } 
])



// 计算属性：将数据按每页6个进行分组
const carouselPages = computed(() => {
  
    const pages = [];
    for (let i = 0; i < items.value.length; i += 6) {
        pages.push(items.value.slice(i, i + 6));
    }
    return pages;
});







// pnpm install @dataview/datav-vue3  pnpm install @jiaminghi/data-view
//npm uninstall @jiaminghi/data-view pnpm uninstall @dataview/datav-vue3
</script>
<style lang="scss" scoped>
@use './index.scss';
</style>
<style lang='scss' scoped>
/* 轮播页容器：3行，每行高度1/3；2列，每列50%宽度 */
.carousel-page {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* 每行2列 */
    grid-template-rows: repeat(3, 1fr);
    /* 3行，每行高度均等（1/3容器高度） */
    gap: 16px;
    /* 项目间距（可调整） */
    height: 100%;
    /* 占满轮播容器高度 */
}

/* 每个项目：占据1行1列的网格空间 */
.grid-item {
    grid-column: span 1;
    /* 占1列 */
    grid-row: span 1;
    /* 占1行（关键：强制每个项目只占1行高度） */
}







.table-container {
    width: 100%;
    overflow: hidden;
}

.el-table {
    border: none;
}

.el-table__body-wrapper {
    overflow: hidden;
    /* 隐藏滚动条 - Chrome、Safari 和 Opera */
    -ms-overflow-style: none;
    /* IE 和 Edge */
    scrollbar-width: none;
    /* Firefox */
}

.el-table__body-wrapper::-webkit-scrollbar {
    display: none;
    /* Chrome、Safari 和 Opera */
}

/* 取消表格行悬停变色效果
--el-table-row-hover-bg-color:
*/
.el-table {
    --el-table-row-hover-bg-color: inherit !important;
    --el-table-border-color: inherit !important;
}

:deep(.rowclass) {
    background-color: #030409;
    color: white;
}

.subtitle {
    font-size: 2vw;
}



:deep(.dv-scroll-board .rows) {
    border-radius: 10px;
    overflow: hidden;
}

:deep(div[tag="alarm"] > .dv-scroll-board .rows .row-item) {

    font-size: 1.5vw;
    color: #dbdad8;
}

// :deep(div[tag="alarm"] > .dv-scroll-board .rows .row-item>div:nth-child(1) ){
//     width: 100% !important;
// }

.background {
    background-color: #030409;
    color: white;

}


.content {
    display: flex;
    justify-content: space-between;
    flex: 1;
    padding-bottom: 10px;
    box-sizing: border-box;
}

.flex-col {
    display: flex;
    flex: 1;
    padding: 20px;
    flex-direction: column;

    .content {
        display: flex;
        flex: 7.5;
    }

    .root {
        display: flex;
        flex: 2.5;
        padding-bottom: 10px;
    }
}

/* 设置 div 为圆形并添加红色渐变背景 */
.blinking-circle {
    //   width: 100px;
    //   height: 100px;
    border-radius: 50%;
    /* 红色渐变背景 */
    background: radial-gradient(circle at center, #ff0000, #800000);
    /* 应用闪烁动画 */
    animation: blink 1s infinite alternate;
}

/* 定义闪烁动画 */
@keyframes blink {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0.3;
    }
}
</style>
